<template>
	<div>
		<el-popover placement="right" trigger="hover">
			<div class="cl-customer-info" @click="onClick">
				<div class="cus-avatar">
					<cl-avatar class="cover" :src="cover">
						<cl-avatar slot="error" class="cover" :src="cover" />
					</cl-avatar>
					<img v-if="gender != null" class="cus-gender"
						:src="require(`@/assets/img/${gender == 2 ? 'girl' : 'boy'}.png`)" />
				</div>
				<div class="pl-1 cus-info flex-column">
					<div class="cus-name flex flex-align-center" @click.stop.prevent="copyName">
						<el-tooltip content="复制" placement="top">
							<div class="ellipsis">{{ name }}</div>
						</el-tooltip>
						<div v-if="!isEmpty(type)" class="cus-type"
							:style="{ backgroundColor: constFilterFn(type, 'CUS_TYPE', 'color') }">
							<template v-if="type != 4">{{ type | constFilter("CUS_TYPE") }}</template>
							<template v-else>转介绍</template>
						</div>
						<div v-if="makeCall && Number(haveFan)" v-auth="'store_make_call'" class="fan-type">
							重粉
						</div>
						<div class="icon-type" v-if="compile" @click.stop.prevent="openCompile('cus_name')">
							<i v-if="$auth('store_cusdetailindex_edit')"
								class="custom-icon custom-icon-xiugai icon-type-icon" />
						</div>
					</div>
					<div v-if="mobile" class="flex flex-align-center">
						<icon-svg name="mobile-new" class="icon mobile"/>
						<!-- <div class="ellipsis">{{ mobile | privacyPhone }}</div> -->
						<div class="ellipsis">{{ mobile }}</div>
						<div class="flex flex-align-center makecall" v-if="makeCall && !Number(haveFan)" @click="makeTel">
							<icon-svg name="call" size="14" />
						</div>
					</div>
					<div v-if="wechat" class="flex flex-align-center">
						<icon-svg name="weixin-new" class="icon" size="14"
							:style="{ width: id_join_type == 5 ? '22px' : '18px',height:'18px' }" />

						<el-tooltip class="item ellipsis" effect="dark" :content="wechat | privacyWechat"
							placement="top-start" v-if="is_tooltip">
							<div>
								{{ wechat | privacyWechat }}
							</div>
						</el-tooltip>
						<div class="item ellipsis" v-if="!is_tooltip">
							{{ wechat | privacyWechat }}
						</div>
					</div>
					<div v-if="cusId" class="flex flex-align-center">
						<icon-svg name="userIcon" class="icon" size="14"
							:style="{ width: id_join_type == 5 ? '22px' : '14px' }" />
						<div @click.stop.prevent="copyCusId">
							<!-- <el-tooltip
								class="item ellipsis"
								effect="dark"
								:content="cusId + ' 复制'"
								placement="top-start"
								v-if="is_tooltip"
							>
								<div >
									{{ cusId }}
								</div>
							</el-tooltip> -->
							<el-tooltip content="复制" placement="top">
								<div class="ellipsis">{{ cusId.length > 10 ? cusId.substring(0, 10) + '...' : cusId }}</div>
							</el-tooltip>

							<div class="item ellipsis" v-if="!is_tooltip">
								{{ cusId.length > 10 ? cusId.substring(0, 10) + '...' : cusId }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<el-button slot="reference" type="text">查看</el-button>
		</el-popover>
	</div>
</template>
<script>
import { copy } from "@/cool/modules/base";
import { constFilter as constFilterFn } from "@/filters";
import { isEmpty } from "cl-admin/utils";
export default {
	name: "cl-customer-new",
	props: {
		avatar: String,
		name: {
			type: String,
			default: ""
		},
		gender: [Number, String],
		type: [Number, String],
		mobile: String,
		wechat: String,
		cusId: [Number, String],
		makeCall: {
			type: Boolean,
			default: false
		},
		haveFan: [Number, String],
		compile: {
			type: Boolean,
			default: false
		},
		id_join_type: [Number, String],
		is_tooltip: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		cover() {
			if (this.avatar) {
				return this.avatar;
			}
			return require(`@/assets/img/${this.gender == 2 ? "women" : "men"}.png`);
		}
	},
	methods: {
		isEmpty,
		constFilterFn,
		copyName(e) {
			copy(this.name, e);
		},
		copyCusId(e) {
			copy(this.cusId, e);
		},
		onClick() {
			this.$emit("click");
		},
		makeTel() {
			this.$emit("makeTel");
		},
		openCompile(name) {
			//name是父组件的客户名称变量名
			this.$emit("openCompile", { name: name, type: "客户名称" });
		}
	}
};
</script>
<style lang="scss" scoped>
.cl-customer-info {
	display: flex;
	// justify-content: center;
	align-items: center;
	width: 100%;
	overflow: hidden;

	.cus-avatar {
		position: relative;
		height: 50px;
		width: 50px;

		.cus-gender {
			width: 12px;
			height: 12px;
			position: absolute;
			bottom: 0;
			right: -4px;
			border: 1px solid #fff;
			border-radius: 50%;
		}
	}

	.cus-info {
		// flex: 1;
		text-align: left;
		min-width: 120px;
		line-height: 1.5;
	}

	.cus-name {
		line-height: normal;
		cursor: pointer;
		min-width: 20px;
	}

	.cus-type {
		margin-left: 6px;
		display: inline-block;
		border-radius: 16px;
		background: $color-danger;
		padding: 2px 10px;
		font-size: 12px;
		color: #fff;
		line-height: normal;
		min-width: 24px;
		text-align: center;
	}

	.fan-type {
		margin-left: 6px;
		display: inline-block;
		border-radius: 16px;
		background: $color-success;
		padding: 2px 10px;
		font-size: 12px;
		color: #fff;
		line-height: normal;
		min-width: 24px;
		text-align: center;
	}

	.icon-type {
		margin-left: 6px;
		display: inline-block;

		&-icon {
			font-size: 20px;
			color: #ababab;
		}
	}

	.icon {
		margin-right: 4px;

		&.mobile {
			width: 18px;
			height: 18px;
		}
	}

	.makecall {
		cursor: pointer;
		margin-left: 8px;
		position: relative;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #f4ecfd;
		// top: -1px;
		justify-content: center;
		align-items: center;
	}
}
</style>
